<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
  <link href="__PUBLIC__/css/plugins/chosen/chosen.css" rel="stylesheet">
  <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
  <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInUp">

  <div class="row">
    <div class="col-sm-12">
      <div class="tabs-container" >
        <ul class="nav nav-tabs" id="tagTitle">
          <li class="active">
            <a data-toggle="tab" href="#adobt" v-on:click="refresh" aria-expanded="true">领养</a>
          </li>
          <li class="">
            <a data-toggle="tab" href="#my" v-on:click="refresh" aria-expanded="false">我的发布</a>
          </li>
        </ul>
        <div class="tab-content">
          <div id="adobt" class="tab-pane active">
            <div class="ibox">
              <div class="ibox-content">
                <div class="row m-b-sm m-t-sm">
                  <div class="col-md-8"></div>
                  <div class="col-md-4">
                    <div class="input-group">
                      <input type="text" placeholder="请输入宠物信息" v-model="searchContent" class="input-sm form-control">
                      <span class="input-group-btn">
                          <button type="button" class="btn btn-sm btn-primary" v-on:click="search"> 搜索</button>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-4">
                    <button class="btn btn-white btn-bitbucket" v-on:click="addList">
                      我想发布
                    </button>
                  </div>
                  <div class="col-sm-8"></div>
                </div>
                <div class="project-list">

                  <table class="table table-hover" >
                    <tbody>
                    <tr v-for="pet in currentData">
                      <td class="project-status">
                        <span class="label label-default" v-if="pet.adobted">已领养</span>
                        <span class="label label-primary" v-if="!pet.adobted">未领养</span>
                      </td>
                      <td class="project-title">
                        <a href="">{{pet.name}}</a>
                        <br/>
                        <small>{{pet.time}}</small>
                      </td>
                      <td class="project-completion">
                        <span v-if="pet.hasReward==='1'" class="label label-warning">出售</span>
                        <span v-if="pet.hasReward==='0'" class="label label-warning">赠送</span>
                      </td>
                      <td class="project-people">

                      </td>
                      <td class="project-actions">
                        <a v-on:click="getDetail(pet.Id)" class="btn btn-white btn-sm"> 查看详情 </a>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="text-center">
              <div class="btn-group">
                <button class="btn btn-white" type="button" :disabled="currentPage===startPage" v-on:click="minus"><i class="fa fa-chevron-left"></i></button>
                <button class="btn btn-white " v-on:click="jump(i)" v-for="i in pages" :class="i===currentPage?'active':''">{{i}}</button>
                <button class="btn btn-white" type="button" :disabled="currentPage===endPage" v-on:click="add()"><i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
          <div id="my" class="tab-pane">
            <div class="ibox">
              <div class="ibox-content">
                <div class="project-list">

                  <table class="table table-hover">
                    <tbody>
                    <tr v-for="pet in currentData">
                      <td class="project-status">
                        <span class="label label-default" v-if="pet.adobted">已领养</span>
                        <span class="label label-primary" v-if="!pet.adobted">未领养</span>
                      </td>
                      <td class="project-title">
                        <a href="">{{pet.name}}</a>
                        <br/>
                        <small>{{pet.time}}</small>
                      </td>
                      <td class="project-completion">
                      </td>
                      <td class="project-people">
                      </td>
                      <td class="project-actions">
                        <a v-on:click="confirm(pet.Id)" class="btn btn-white btn-sm">已被领养 </a>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="text-center">
              <div class="btn-group">
                <button class="btn btn-white" type="button" :disabled="currentPage===startPage" v-on:click="minus"><i class="fa fa-chevron-left"></i></button>
                <button class="btn btn-white " v-on:click="jump(i)" v-for="i in pages" :class="i===currentPage?'active':''">{{i}}</button>
                <button class="btn btn-white" type="button" :disabled="currentPage===endPage" v-on:click="add()"><i class="fa fa-chevron-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/plugins/chosen/chosen.jquery.js"></script>
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script src="__PUBLIC__/js/pet.js"></script>
</body>
</html>
